<script>
import {defineComponent, ref, computed} from 'vue';
import {ElMessage} from 'element-plus';
import {useRouter} from 'vue-router';
import {useUserStore} from '../stores/user/user.js';

import {
  House,
  User,
  Box,
  DocumentChecked,
  Setting,
  Goods,
  Edit, ArrowDown,
} from '@element-plus/icons-vue';

export default defineComponent({
  components: {
    ArrowDown,
    House,
    User,
    Box,
    DocumentChecked,
    Setting,
    Goods,
    Edit,
  },
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const userName = computed(() => userStore.userInfo?.username || '未登录');
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath);
    };
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath);
    };
    const logout = () => {
      userStore.logout();
      ElMessage.success('退出成功');
      router.push('/login');
    };
    return {
      handleOpen,
      handleClose,
      logout,
      userName,
    };
  },
});
</script>

<template>
  <el-container>
    <!-- Header -->
    <el-header class="header">
      <el-row justify="space-between" align="middle">
        <el-col :span="6">
          <div class="logo">实验室资产管理系统</div>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-dropdown>
            <span class="el-dropdown-link">
                {{ userName }}
                <el-icon><ArrowDown/></el-icon>
              </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                <el-dropdown-item @click="password">修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>

    <el-container>
      <el-aside width="200px">
        <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
        >
          <el-menu-item index="dashboard" route="/admin/dashboard">
            <el-icon>
              <House/>
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="1" route="/admin/users">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>      用户管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="2" route="/admin/assets">
            <template #title>
              <el-icon>
                <Box/>
              </el-icon>
              <span>资产入库</span>
            </template>
          </el-menu-item>
          <el-menu-item index="3" route="/admin/borrow">
            <template #title>
              <el-icon>
                <DocumentChecked/>
              </el-icon>
              <span>借用&归还              </span>

            </template>
          </el-menu-item>
          <el-menu-item index="4" route="/admin/maintain">
            <template #title>
              <el-icon>
                <Setting/>
              </el-icon>
              <span>维护信息登记</span>
            </template>
          </el-menu-item>
          <el-menu-item index="5" route="/admin/inventory">
            <template #title>
              <el-icon>
                <Goods/>
              </el-icon>
              <span>库存管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="sign" route="/admin/sign">
            <el-icon>
              <Edit/>
            </el-icon>
            <span>签到管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="main">
        <router-view v-slot="{ Component }">
          <component :is="Component"/>
        </router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<style>
.header {
  background-color: #fdfdfd;
  padding: 0 20px;
  border-bottom: 1px solid #acadaf;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: 60px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
}

.el-container {
  height: 100vh;
}

.el-aside {
  color: #333;
  border-right: 1px solid #acadaf;
  height: 100% !important;
  overflow: hidden;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: rgba(46, 67, 216, 0.91);
  line-height: 60px;
}
</style>